<template>
  <div class="root">
    <div class="home">
      <router-link to="/">
        <img class="img_icon" src="~@/assets/supergame/home.png">
      </router-link>
    </div>
    <!-- <div class="back">
      <router-link to="/">
        <img class="img_icon" src="~@/assets/supergame/back.png">
      </router-link>
    </div> -->
    <div class='exitButton'>
      <router-link to="/">
        <img src='~@/assets/home/exit.png'>
      </router-link>
    </div>
    <div class="title">
        <img class="img_icon" src="~@/assets/supergame/textimg.png">
    </div>
    <div class="one_up one_up_color" @click="change_active_grade(1)">
        <p class="grade_text">一级上</p>
    </div>
    <div class="one_down one_down_color" @click="change_active_grade(2)">
        <p class="grade_text">一级下</p>
    </div>
    <div class="two_up two_up_color" @click="change_active_grade(3)">
        <p class="grade_text">二级上</p>
    </div>
    <div class="two_down two_down_color" @click="change_active_grade(4)">
        <p class="grade_text">二级下</p>
    </div>
    <div class="three_up three_up_color" @click="change_active_grade(5)">
        <p class="grade_text">三级上</p>
    </div>
    <div class="three_down three_down_color" @click="change_active_grade(6)">
        <p class="grade_text">三级下</p>
    </div>
    <!-- <div class="grade_list">
        <div class="one_up_color" :class="[active_grade==1?'grade_active':'grade_item']" style="margin-left: 2%;" @click="choose_active_grade(1)">
            <p class="grade_text">一级上</p>
        </div>
        <div class="one_down_color" :class="[active_grade==2?'grade_active':'grade_item']" @click="choose_active_grade(2)">
            <p class="grade_text">一级下</p>
        </div>
        <div class="two_up_color" :class="[active_grade==3?'grade_active':'grade_item']" @click="choose_active_grade(3)">
            <p class="grade_text">二级上</p>
        </div>
        <div class="two_down_color" :class="[active_grade==4?'grade_active':'grade_item']" @click="choose_active_grade(4)">
            <p class="grade_text">二级下</p>
        </div>
        <div class="three_up_color" :class="[active_grade==5?'grade_active':'grade_item']" @click="choose_active_grade(5)">
            <p class="grade_text">三级上</p>
        </div>
        <div class="three_down_color" :class="[active_grade==6?'grade_active':'grade_item']" style="margin-right: 0;" @click="choose_active_grade(6)">
            <p class="grade_text">三级下</p>
        </div>
    </div> -->
  </div>
</template>

<script>
  export default {
    name: 'supergame',
    data () {
      return {
      }
    },
    methods: {
      change_active_grade (index) {
        this.$store.commit('change_active_grade', index)
        this.$router.push({ name: 'supergame_grade' })
      }
    }
  }
</script>

<style scoped>
.root {
  background: url('~@/assets/supergame/bg.jpg');
  width: 1280px;
  height: 720px;
  position: absolute;
  margin: 0;
  overflow: hidden;
  background-size: 100% 100%;
}
.root > div {
  position: absolute;
}
.img_icon {
    width: 100%;
    height: 100%;
}
.home {
  top: 30px;
  left: 35px;
  z-index: 10;
  width: 50px;
  height: 50px;
}
.back {
  top: 54px;
  left: 57px;
  z-index: 10;
  width: 60px;
  height: 60px;
}
.exitButton {
  right: 30px;
  top: 30px;
}
.title {
    left: 460px;
    top: 40px;
    width: 300px;
    height: 250px;
}
.grade_text {
    line-height: 60px;
    color: white;
    text-align: center;
    margin: 0;
    font-size: 40px;
}
.one_up, .one_down, .two_up, .two_down, .three_up, .three_down {
    width: 210px;
    height: 60px;
    border-radius: 5px;
}
.one_up_color {
    background: #E5AD34;
}
.one_up {
    top: 330px;
    left: 140px;
}
.one_down_color {
    background: #FBD480;
}
.one_down {
    top: 450px;
    left: 140px;
}
.two_up_color {
    background: #F8747C;
}
.two_up {
    top: 330px;
    left: 520px;
}
.two_down_color {
    background: #F54550;
}
.two_down {
    top: 450px;
    left: 520px;
}
.three_up_color {
    background: #31CBB6;
}
.three_up {
    top: 330px;
    left: 900px;
}
.three_down_color {
    background: #88EDDE;
}
.three_down {
    top: 450px;
    left: 900px;
}

</style>
